<template>
    <!-- 基础信息 -->

    <template v-if="props.type == 0">
        <messageBox :title="props.title">
            <div class="pop_xhibit">
                <div class="pop_xhibit_item">
                    <div class="pop_label">供应商名：</div>
                    <div class="pop_value text-warp">{{ data?.supplierName || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">69码：</div>
                    <div class="pop_value text-warp">{{ data?.styleCode || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">类目：</div>
                    <div class="pop_value text-warp">{{ data?.productCategoryName || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">品牌：</div>
                    <div class="pop_value text-warp">{{ data?.brandName || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">对接群：</div>
                    <div class="pop_value text-warp">{{ data?.groupName || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">规格/材质：</div>
                    <div class="pop_value text-warp">{{ data?.specs || '' }}</div>
                </div>
                <!-- <div class="pop_xhibit_item">
                    <div class="pop_label">材质：</div>
                    <div class="pop_value text-warp">{{ data?.ingredient || '' }}</div>
                </div> -->
                <div class="pop_xhibit_item">
                    <div class="pop_label">上架时间：</div>
                    <div class="pop_value text-warp">{{ data?.shoppingTime || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">贸易方式：</div>
                    <div class="pop_value text-warp">{{ data?.tradeMode || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">是否走仓：</div>
                    <div class="pop_value text-warp">{{ (data?.warehouse || '') ? '是' : '否' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">历史最低售价：</div>
                    <div class="pop_value text-warp">{{ data?.historyPrice || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">卖点：</div>
                    <div class="pop_value text-warp">{{ data?.sellingPoints || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">直播类型：</div>
                    <div class="pop_value text-warp">{{ data?.liveType || '' }}</div>
                </div>
            </div>
        </messageBox>
    </template>

    <!-- 直播补充信息 -->
    <template v-if="props.type == 1">
        <messageBox :title="props.title">
            <div class="pop_xhibit">
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货时间：</div>
                    <div class="pop_value text-warp">{{ data?.deliveryTime || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">发货地：</div>
                    <div class="pop_value text-warp">{{ data?.placeDelivery || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">物流/快递：</div>
                    <div class="pop_value text-warp">{{ data?.logistics || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">适用人群：</div>
                    <div class="pop_value text-warp">{{ data?.eligibility || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">厂家可用库存：</div>
                    <div class="pop_value text-warp">{{ data?.factoryStockNum || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">不发货地区：</div>
                    <div class="pop_value text-warp">{{ data?.noSendArea || '' }}</div>
                </div>
            </div>
        </messageBox>
    </template>


    <!-- 供应商信息 -->
    <template v-if="props.type == 2">
        <messageBox :title="props.title">
            <div class="pop_xhibit">
                <div class="pop_xhibit_item">
                    <div class="pop_label">商家类型：</div>
                    <div class="pop_value">{{ data?.supplierType || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">厂家地址：</div>
                    <div class="pop_value">{{ data?.addr || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">联系人：</div>
                    <div class="pop_value">{{ data?.contactName || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">联系电话：</div>
                    <div class="pop_value">{{ data?.phone || '' }}</div>
                </div>
                <div class="pop_xhibit_item">
                    <div class="pop_label">详细地址：</div>
                    <div class="pop_value">{{ data?.address || '' }}</div>
                </div>
                <div class="pop_xhibit_item_tips">
                    <div class="tip_box fl-box-s-b"
                        :class="{ tip_box_y: data?.sellStatus == '1', tip_box_n: data?.sellStatus != '1' }">供销合同 <div
                            :class="{ tip_img_y: data?.sellStatus == '1', tip_img_n: data?.sellStatus != '1' }"></div>
                    </div>
                    <div class="tip_box fl-box-s-b"
                        :class="{ tip_box_y: data?.discountStatus == '1', tip_box_n: data?.discountStatus != '1' }">破价合同
                        <div
                            :class="{ tip_img_y: data?.discountStatus == '1', tip_img_n: data?.discountStatus != '1' }">
                        </div>
                    </div>
                    <div class="tip_box fl-box-s-b"
                        :class="{ tip_box_y: data?.depositStatus == '1', tip_box_n: data?.depositStatus != '1' }">保证金协议
                        <div :class="{ tip_img_y: data?.depositStatus == '1', tip_img_n: data?.depositStatus != '1' }">
                        </div>
                    </div>
                    <div class="tip_box fl-box-s-b"
                        :class="{ tip_box_y: data?.supplementStatus == '1', tip_box_n: data?.supplementStatus != '1' }">
                        补充协议
                        <div
                            :class="{ tip_img_y: data?.supplementStatus == '1', tip_img_n: data?.supplementStatus != '1' }">
                        </div>
                    </div>
                </div>
                <div class="pop_xhibit_item" :class="data?.otherImageSUpplier ? 'img_box' : ''">
                    <div class="pop_label">其他资质：</div>
                    <div class="pop_values pop_wrap pop_image" v-if="data?.otherImageSUpplier">
                        <div class="mul_imags" >
                            <div v-for="(item, index) in data?.otherImageSUpplier" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                    </div>
                    <div class="pop_value" v-else>无</div>
                </div>
                <div class="pop_xhibit_item" :class="data?.businessImageSupplier ? 'img_box' : ''">
                    <div class="pop_label pop_wrap">营业执照</div>
                    <div class="pop_values pop_wrap pop_image" v-if="data?.businessImageSupplier">
                        <div class="mul_imags">
                            <IsImgPdf :url="data?.businessImageSupplier" />
                        </div>
                    </div>
                    <div class="pop_value" v-else>无</div>
                </div>
            </div>
        </messageBox>
    </template>


    <!-- 商品资质 -->
    <template v-if="props.type == 3">
        <messageBox :title="props.title">
            <div class="pop_xhibit">
                <div class="pop_xhibit_item img_box ">
                    <div class="pop_label pop_wrap">商品实拍</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.productImages || []">
                            <van-image v-for="(item, index) in data?.productImages || []" :src="item" :key="index"
                                @click="enlargeImage(item)">
                                <template v-slot:error>加载失败</template>
                            </van-image>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">备案行政/许可证批件</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.voucherImages">
                            <div v-for="(item, index) in data?.voucherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">其他资质</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.otherImages">
                            <div v-for="(item, index) in data?.otherImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">进口货物/原材料报关单</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.customsDeclarationImages">
                            <div v-for="(item, index) in data?.customsDeclarationImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">进口产品备案材料</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.customsInformationImages">
                            <div v-for="(item, index) in data?.customsInformationImages " :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">进口产品原材料检验检疫证明</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.customsInspectionImages">
                            <div v-for="(item, index) in data?.customsInspectionImages" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item img_box">
                    <div class="pop_label pop_wrap">检测报告</div>
                    <div class="pop_values pop_wrap pop_image">
                        <div class="mul_imags" v-if="data?.customsTestReportImgaes">
                            <div v-for="(item, index) in data?.customsTestReportImgaes" :key="index">
                                <IsImgPdf :url="item" />
                            </div>
                        </div>
                        <div class="mul_imags" v-else>无</div>
                    </div>
                </div>
            </div>
        </messageBox>
    </template>


    <!-- 品牌资质 -->

    <template v-if="props.type == 4">
        <messageBox :title="props.title">
            <div class="pop_xhibit">
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">品牌名称</div>
                    <div class="pop_value pop_wrap">{{ data?.brandName || '无' }}</div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">品牌商标注册证</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data?.brandImages" :url="data?.brandImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">商标授权使用证明</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data?.usageImages" :url="data?.usageImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">授权使用品类</div>
                    <div class="pop_value pop_wrap text-warp">
                        {{ data?.usages || '无' }}
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">店铺销售授权</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data?.sellImages" :url="data?.sellImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">销售授权品类</div>
                    <div class="pop_value pop_wrap text-warp">
                        {{ data?.sells || '无' }}
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">其他补充资质</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data?.otherImages" :url="data?.otherImages" />
                        <div v-else>无</div>
                    </div>
                </div>
                <div class="pop_xhibit_item pop_xhibit_items">
                    <div class="pop_label pop_wrap">联名款/其他授权</div>
                    <div class="pop_value pop_wrap pop_image">
                        <IsImgPdf v-if="data?.jointlyImages" :url="data?.jointlyImages" />
                        <div v-else>无</div>
                    </div>
                </div>
            </div>
        </messageBox>
    </template>


</template>
<script setup lang="ts">
import { defineProps, } from 'vue'
import IsImgPdf from '@/components/isImgPdf/index.vue'
import messageBox from './messageBox.vue'
import { showImagePreview } from 'vant';
const props = defineProps({
    // 是否展示
    modelValue: { type: Boolean, default: false },
    // 展示类型
    type: { type: Number, default: 0 },
    // 展示内容
    data: { type: Object, default: () => { } },
    // 展示title
    title: { type: String, default: '' },
    // 高度
    height: { type: Number, default: 0 },
})
const emit = defineEmits(['update:modelValue'])

/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img]
        })
    }
}

</script>
<style lang="less" scoped>
.pop_xhibit_item_tips {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;

    &::after {
        display: block;
        content: '';
        width: 0;
        flex: 1;
    }

    .tip_box {
        height: 22px;
        border-radius: 5px;
        padding: 0 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
        font-style: normal;


        .tip_img_y {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_lvseduihao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 5px;
        }

        .tip_img_n {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_hongsewenhao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 5px;
        }
    }

    .tip_box_y {
        background: #E7FDEE;
        color: #19D11B;
    }

    .tip_box_n {
        background: #FDE7E7;
        color: #FC2540;
    }
}

.pop_xhibit_item {
    padding: 10px 0;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    display: flex;

    .pop_label {
        width: 100%;
        flex: 3;
        color: #464E5D;
    }

    .pop_value {
        width: 0;
        flex: 5;
        color: #1A1B1C;
    }

    .pop_value_contract {
        display: flex;
        flex-wrap: wrap;

        div {
            margin-right: 9px;
            margin-bottom: 5px;
        }
    }

    .pop_values {
        padding-top: 10px;

        .mul_imags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;


        }

        .van-image {
            width: 90px;
            height: 90px;
        }
    }
}

.img_box {
    display: block;
}
.fl-box-s-b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text-warp {
    word-break: break-all;
    text-align: justify;
}

</style>